<template>
    <div class="sxpcwlkj-store_advertising_location-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="50vw" :close-on-click-modal="false">
            <el-form ref="deptDialogFormRef" :model="state.ruleForm" size="default" label-width="150px" >
                            <el-form-item v-show="false" label="ID" prop="id">
                                <el-input v-model="state.ruleForm.id" placeholder="ID"></el-input>
                            </el-form-item>
                            <el-form-item label="广告位名称" prop="name">
                                <el-input v-model="state.ruleForm.name" placeholder="广告位名称"></el-input>
                            </el-form-item>
                            <el-form-item label="广告位编码" prop="code">
                                <el-input v-model="state.ruleForm.code" placeholder="广告位编码"></el-input>
                            </el-form-item>
                            <el-form-item label="宽度" prop="width">
                                <el-input v-model="state.ruleForm.width" placeholder="宽度"></el-input>
                            </el-form-item>
                            <el-form-item label="高度" prop="height">
                                <el-input v-model="state.ruleForm.height" placeholder="高度"></el-input>
                            </el-form-item>
                            <el-form-item label="最大显示数量" prop="maxNum">
                                <el-input v-model="state.ruleForm.maxNum" placeholder="最大显示数量"></el-input>
                            </el-form-item>
                            <el-form-item label="状态" prop="status">
                                <fast-radio-group v-model="state.ruleForm.status" dict-type="SYS_STATE"></fast-radio-group>
                            </el-form-item>
                            <el-form-item label="排序" prop="sort">
                                <el-input v-model="state.ruleForm.sort" placeholder="排序"></el-input>
                            </el-form-item>
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="state.ruleForm.remark" placeholder="备注"></el-input>
                            </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="onCancel" size="default">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="sxpcwlkjStore_advertising_locationDialog">
    import {reactive, defineAsyncComponent, ref} from 'vue';
    // 引入组件
    const  FastEditor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
    import FastSelect from "/@/components/fast-select/src/fast-select.vue";
    import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";
    import FastImg from "/@/components/fast-upload/img.vue";
    import FastImgs from "/@/components/fast-upload/imgs.vue";
    import FastFile from "/@/components/fast-upload/file.vue";
    import { store_advertising_locationApi } from '/@/api/sxpcwlkj/store_advertising_location';
    const baseApi = store_advertising_locationApi();
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const store_advertising_locationDialogFormRef = ref();

    const state = reactive({
        ruleForm: {
            id: '',
            name: '',
            code: '',
            width: '',
            height: '',
            maxNum: '',
            status: '',
            sort: '',
            revision: '',
            tenantId: '',
            createdBy: '',
            createdTime: '',
            updatedBy: '',
            updatedTime: '',
            remark: ''        },
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
    });
    // 重置
    const resetFomr = () => {
        state.ruleForm = {
            id: '',
            name: '',
            code: '',
            width: '',
            height: '',
            maxNum: '',
            status: '',
            sort: '',
            revision: '',
            tenantId: '',
            createdBy: '',
            createdTime: '',
            updatedBy: '',
            updatedTime: '',
            remark: ''        }
    }
    const openDialog = (type: string, row: RowStore_advertising_locationType) => {
        resetFomr();
        state.dialog.isShowDialog = true;
        if (type === 'edit'){
            state.ruleForm = row;
            state.dialog.title = '修改';
            state.dialog.submitTxt = '修 改';
        }
        if (type === 'add') {
            state.dialog.title = '新增';
            state.dialog.submitTxt = '新 增';
        }
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        emit('refresh', state.ruleForm);
    };
    // 暴露变量
    defineExpose({
        openDialog, closeDialog
    });
</script>
